<template>
  <Row class="auth-wrap" :gutter="16">
    <i-col span="6">
      <Card class="role-card" :dis-hover="true">
        <p slot="title">角色</p>
        <list :data="roleList" :selectItem="selectRole" @selectChange="selectRoleChange" field="name"></list>
      </Card>
    </i-col>
    <i-col span="18">
      <Card class="auth-content-card" :dis-hover="true">
        <Tabs>
          <TabPane :label="'角色【'+selectRole.name + '】菜单权限'">
            <div class="tool-wrap">
              <Button-group class="rf">
                <i-button type="ghost" icon="plus" class="tool-btn" @click="saveMenu()">保存菜单</i-button>
                <i-button type="ghost" icon="trash-a" class="tool-btn" @click="deleteMenu()">删除所有菜单菜单</i-button>
              </Button-group>
            </div>
            <ztree
              ref='menuTree'
              :treeData="treeData"
              :options="options"></ztree>
          </TabPane>
          <TabPane :label="'角色【'+selectRole.name + '】接口权限'">
            <div class="tool-wrap">
              <label>接口路径</label>
              <i-input v-model="pageConfig.actionPath" style="width: 200px"/>
              <i-button type="ghost" icon="search" @click="searchRoleApi()">搜索</i-button>
              <Button-group class="rf">
                <i-button type="ghost" icon="plus" class="tool-btn" @click="showModal()">添加接口</i-button>
                <i-button type="ghost" icon="trash-a" class="tool-btn" @click="deleteRoleApi()">删除接口</i-button>
              </Button-group>
            </div>

            <i-table
              :columns="columns"
              :data="actionList"
              @on-selection-change="selectActionChange">

            </i-table>
            <Page class="page-wrap" :total="pageConfig.total" :current="pageConfig.page" :pageSize="pageConfig.pageSize"
                  @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="[10,20,30,50]"
                  show-sizer show-elevator show-total placement="top"></Page>
          </TabPane>
        </Tabs>
      </Card>
    </i-col>
    <Modal v-model="modal.show"
           title="添加接口"
           okText="保存接口权限"
           @on-ok="saveRoleApi"
           ok-text="保存"
           cancel-text="关闭">
      <div class="tool-wrap">
        <label>接口路径</label>
        <i-input v-model="modal.pageConfig.actionPath" style="width: 200px"/>
        <i-button type="ghost" icon="search" @click="searchNotRoleApi()">搜索</i-button>
      </div>

      <i-table
        :columns="columns"
        :data="modal.actionList"
        @on-selection-change="mSelectActionChange">

      </i-table>
      <Page class="page-wrap" :total="modal.pageConfig.total" :current="modal.pageConfig.page"
            :pageSize="modal.pageConfig.pageSize"
            @on-change="mPageChange" @on-page-size-change="mPageSizeChange" :page-size-opts="[10,20,30,50]"
            show-sizer show-elevator show-total placement="top"></Page>
    </Modal>
  </Row>
</template>
<script>
  import roleApi from '../../../api/admin/role'
  import menuApi from '../../../api/admin/menu'
  import actionApi from '../../../api/admin/action'
  import List from '../../../components/admin/list.vue'
  import {isConfirm, getIdList} from '../../../assets/admin/js/common'

  export default{
    components: {
      'list': List
    },
    data () {
      return {
        roleList: [],
        selectRole: {},
        treeData: [],
        options: {
          rootName: '菜单权限树',
          load: () => {
          },
          labelKey: 'title',
          showCheckbox: true,
          halfCheck: true,
          lazy: false,
          showSearch: false
        },
        columns: [
          {
            type: 'selection',
            width: 62,
            align: 'center'
          },
          {
            title: '接口路径',
            key: 'path'
          },
          {
            title: '功能描述',
            key: 'describe'
          }
        ],
        actionList: [],
        selectAction: [],
        pageConfig: {
          page: 1,
          pageSize: 10,
          total: 0,
          actionPath: ''
        },
        modal: { // 角色未拥有权限
          show: false,
          actionList: [],
          selectAction: [],
          pageConfig: {
            page: 1,
            pageSize: 10,
            total: 0,
            actionPath: ''
          }
        }
      }
    },
    methods: {
      showModal () {
        this.modal.show = true
      },
      selectRoleChange (row) {
        const self = this
        self.selectRole = row
        self.getMenuTree()
        self.getRoleApiList()
        self.getNotRoleApiList()
      },
      selectActionChange (rows) {
        this.selectAction = rows
      },
      pageChange (page) {
        const self = this
        self.pageConfig.page = page
        self.getRoleApiList()
      },
      pageSizeChange (pageSize) {
        const self = this
        self.pageConfig.pageSize = pageSize
        self.getRoleApiList()
      },
      mSelectActionChange (rows) {
        this.modal.selectAction = rows
      },
      mPageChange (page) {
        const self = this
        self.modal.pageConfig.page = page
        self.getNotRoleApiList()
      },
      mPageSizeChange (pageSize) {
        const self = this
        self.modal.pageConfig.pageSize = pageSize
        self.getNotRoleApiList()
      },
      searchRoleApi () {
        this.getRoleApiList()
      },
      searchNotRoleApi () {
        this.getNotRoleApiList()
      },
      getRoleList () {
        const self = this
        roleApi.getRoleList(data => {
          self.roleList = data
          self.selectRole = data[0]
          self.getMenuTree()
          self.getRoleApiList()
          self.getNotRoleApiList()
        })
      },
      getMenuTree () {
        const self = this
        menuApi.getRoleMenu(self.selectRole.id, data => {
          self.treeData = data
        })
      },
      saveMenu () {
        const self = this
        let ids = this.$refs.menuTree.getSelectedNodeIds()
        roleApi.saveRoleMenu(self.selectRole.id, ids, res => {
          self.$Message.success('保存菜单成功')
        })
      },
      deleteMenu () {
        const self = this
        roleApi.deleteRoleMenu(self.selectRole.id, res => {
          self.getMenuTree()
          self.$Message.success('删除菜单成功')
        })
      },
      getRoleApiList () {
        const self = this
        actionApi.getRoleApiListAction({roleId: self.selectRole.id, ...self.pageConfig}, data => {
          self.actionList = data.data
          self.pageConfig.total = data.count
        })
      },
      getNotRoleApiList () {
        const self = this
        actionApi.getNotApiListAction({roleId: self.selectRole.id, ...self.modal.pageConfig}, data => {
          self.modal.actionList = data.data
          self.modal.pageConfig.total = data.count
        })
      },
      saveRoleApi () {
        const self = this
        const selectAction = self.modal.selectAction
        if (selectAction.length === 0) {
          self.$Message.warning('请选择接口')
          return
        }
        let actions = []
        selectAction.forEach(action => {
          actions.push({action_id: action.id, action_path: action.path})
        })
        actionApi.saveRoleApi(self.selectRole.id, actions, () => {
          self.modal.show = false
          self.getRoleApiList()
          self.getNotRoleApiList()
        })
      },
      deleteRoleApi () {
        const self = this
        const selectAction = this.selectAction
        if (selectAction.length === 0) {
          self.$Message.warning('请选择接口')
          return
        }
        isConfirm('确认删除角色接口？', () => {
          actionApi.deleteRoleApi(self.selectRole.id, getIdList(selectAction), () => {
            self.$Message.success(`删除角色接口成功！`)
            self.getRoleApiList()
            self.getNotRoleApiList()
          })
        })
      }
    },
    mounted () {
      this.getRoleList()
    }
  }
</script>
<style lang="less">
  .auth-wrap {
    height: 100%;
    .role-card .ivu-card-body {
      padding: 0;
    }
    .auth-content-card {

    }
    .ivu-col, .ivu-card {
      height: 100%;
    }
  }
</style>
